<template>
  <div class="dashboard">
    <el-row :gutter="20" class="mb-20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon bg-blue">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">128</div>
              <div class="stat-label">用户数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon bg-green">
              <el-icon><Tickets /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">56</div>
              <div class="stat-label">订单数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon bg-yellow">
              <el-icon><Goods /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">23</div>
              <div class="stat-label">商品数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon bg-red">
              <el-icon><ChatLineRound /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">8</div>
              <div class="stat-label">消息数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mb-20">
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>数据统计</span>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <el-icon size="50"><DataAnalysis /></el-icon>
              <p>数据图表展示区域</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统信息</span>
            </div>
          </template>
          <div class="system-info">
            <ul>
              <li>
                <span class="label">操作系统:</span>
                <span class="value">Linux</span>
              </li>
              <li>
                <span class="label">运行环境:</span>
                <span class="value">Node.js v18.17.0</span>
              </li>
              <li>
                <span class="label">服务器时间:</span>
                <span class="value">{{ currentTime }}</span>
              </li>
              <li>
                <span class="label">当前星期:</span>
                <span class="value">{{ currentWeek }}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-row :gutter="20">
              <el-col :xs="12" :sm="6" :md="4" :lg="3" :xl="2" v-for="action in quickActions" :key="action.title">
                <div class="action-item">
                  <el-icon size="30" :color="action.color"><component :is="action.icon" /></el-icon>
                  <span class="action-title">{{ action.title }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { User, Tickets, Goods, ChatLineRound, DataAnalysis, Document, Setting, UserFilled, Edit } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { ref, onMounted, onUnmounted } from 'vue'

// 获取当前时间并定时更新
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
const timer = ref(null)

// 计算星期几
const currentWeek = ref(dayjs().format('dddd'))

onMounted(() => {
  timer.value = setInterval(() => {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

const quickActions = ref([
  { title: '添加用户', icon: User, color: '#409eff' },
  { title: '订单管理', icon: Document, color: '#67c23a' },
  { title: '商品管理', icon: Goods, color: '#e6a23c' },
  { title: '系统设置', icon: Setting, color: '#f56c6c' },
  { title: '个人中心', icon: UserFilled, color: '#909399' },
  { title: '编辑资料', icon: Edit, color: '#409eff' }
])
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-item {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 20px;
}

.bg-blue {
  background-color: #409eff;
}

.bg-green {
  background-color: #67c23a;
}

.bg-yellow {
  background-color: #e6a23c;
}

.bg-red {
  background-color: #f56c6c;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  text-align: center;
  color: #999;
}

.system-info ul {
  padding: 0;
  margin: 0;
}

.system-info li {
  list-style: none;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

.system-info li:last-child {
  border-bottom: none;
}

.label {
  font-weight: bold;
  color: #666;
}

.value {
  color: #333;
}

.quick-actions {
  padding: 10px 0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 10px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 4px;
}

.action-item:hover {
  background-color: #f5f7fa;
}

.action-title {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.card-header {
  font-weight: bold;
  color: #333;
}
</style>